<template>
    <view class="content">
        <show-modal></show-modal>
        <!-- <navigation-custom :config="config" /> -->

        <view class="cu-card case" v-for="(item,index) in list" :key="index" @click="choose(item)">
            <view class="cu-item shadow">
                <view class="image">
                    <image :src="item.pic" mode="widthFix"></image>
                    <view class="cu-tag bg-blue" v-for="(tag,index) in item.tags">{{tag}}</view>
                    <view class="cu-bar bg-shadeBottom">
                        <text class="text-cut">
                            {{item.name}}
                        </text>
                    </view>
                </view>
                
                <view class="cu-list menu-avatar">
                    <view class="cu-item">
                        <view class="cu-avatar round xs" :style="'background-image:url(' +item.avatar +');'"></view>
                        <view class="content flex-sub">
                            <view>{{item.nickname}}</view>
                            <view class="text-gray text-sm flex justify-between">
                                {{item.createTime}}
                                
                                <view class="text-gray text-sm">
                                    <text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.views}}
                                    <text class="cuIcon-appreciatefill margin-lr-xs"></text> {{item.collects}}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 导航栏
                config: {
                    title: "我的作品", //title
                    bgcolor: "#c1a379", //背景颜色
                    type: 1, //type 1，3胶囊 2，4无胶囊模式
                    linear: true, //是为开启下滑渐变
                },
                page: 1,
                total: 1,
                list: [], // 列表
                loading: true,
            }
        },
        mounted() {
            console.log('user mounted')
            let that = this;
            this.queryMyWorks();
        },
        methods: {
            queryMyWorks: function() {
                if (this.list.length < this.total) {
                    this.loading = true
                    let data = {
                        "currPage": this.page,
                        "pageSize": 10,
                        "entity": {
                            "searchKeyword": ""
                        }
                    }

                    this.$api.worksListByPage(data).then((res) => {
                        this.loading = false;
                        console.log("WorksListByPage", res)
                        this.total = res.data.totalCount;
                        if (res.data.totalCount > 0) {
                            this.list = this.list.concat(res.data.records);
                            this.list.forEach((item, index) => {
                                if(item.auditStatus == 1) {
                                    item.tags = [];
                                    item.tags.push("草稿");
                                } else if(item.auditStatus == 2) {
                                    item.tags = [];
                                    item.tags.push("待审核");
                                } else if(item.auditStatus == 3) {
                                    item.tags = [];
                                    item.tags.push("审核拒绝");
                                }
                            })
                        }
                    }).catch((err) => {
                        this.loading = false;
                        console.error('request fail', err);
                    })
                }
            },

            cardChoose(e) {
                let index = e.currentTarget.dataset.index;
                this.choose(this.list[index]);
            },
            choose(item) {
                uni.redirectTo({
                    url: "/pages/book/publish?id=" + item.id
                })
            },
            reachBottom() {
                console.log('Works-search onReachBottom')
                this.page++;
                this.loading = true;
                this.queryMyWorks();
            },
        },
        onReachBottom() {
            console.log('search-home onReachBottom')
            this.reachBottom();
        }
    }
</script>

<style lang="less">
    .display-inline {
        display: inline-block;
    }

    .cu-list.menu>.cu-item .content {
        margin-bottom: 5px;
    }
    .contact-btn {
        padding: 0px 10px !important;
    }
</style>
